<template>
  <view>
    <Lampgoods>
      <view class="pricese">
        <view class="price">￥{{goods_Detail.goods_Detailst.unit_price}}</view>
        <view class="delprice">￥{{goods_Detail.goods_Detailst.discount_price}}</view>
      </view>
      <view slot="goumaibut" class="right">
        <view class="cart btn u-line-1" @click="showkua">加入购物车</view>
        <view class="buy btn u-line-1" @click="showkua">立即购买</view>
     
      </view>
    </Lampgoods>
  
    <!-- 弹出层 -->
    <view v-if="goods_Detail.status==='success'">
      <u-popup v-model="show" mode="bottom" :closeable="true">
        <view class="eject">
          <!-- 上 -->
          <view class="eject-s">
            <!-- 图片 -->
            <view class="eject-img">
              <image :src="goods_Detail.goods_Detailst.goodswep.split('\n')[0]" mode=""></image>
            </view>
            <!-- 价钱  库存 -->
            <view class="prices">
              <!-- 价钱 -->
              <text class="prices-name">￥{{goods_Detail.goods_Detailst.unit_price}}</text>
              <!-- 库存 -->
              <text class="prices-span">库存：996</text>
            </view>
          </view>
          <!-- 中 -->
          <view class="eject-z">
            <text class="cject-name">规格</text>
            <!-- 默认规格  选中default  不选中defaultt -->
            <view class="default" :class="unique ? 'defaultt' : 'defaulter'" @click="unique = !unique">
              <text class="default-name">默认</text>
            </view>
          </view>
          <!-- 下 -->
          <view class="eject-x">
            <!-- 数量 -->
            <view class="quantity">
              <text class="quantity-name" >数量</text>
              <!-- 加减 -->
              <view class="quantity-box">
                <!-- 减 -->
                <view class="reduce" @click="cutcount">
                  <u-icon name="minus"></u-icon>
                </view>
                <view class="amount">
                  	<u-input input-align="center" placeholder="数量" height="50rpx" v-model="goodcount" type="number" @blur="isnumber" />
                </view>
                <!-- 加 -->
                <view class="addd" @click="addcount">
                  <u-icon name="plus"></u-icon>
                </view>
              </view>
            </view>
            <!-- 加入  够买 -->
            <view class="category">
              <!-- 加入 -->
              <view class="join" @click="addcart">
                <text >加入购物车</text>
              </view>
              <!-- 够买 -->
              <view class="buy" @click="probuy">
                <text >立即够买</text>
              </view>
            </view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script setup>
  import Lampgoods from "/src/components/Lampgoods/Lampgoods.vue"
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    cartStore
  } from "../../store/cart.js"
  import {
    goodsStore
  } from "../../store/goods.js"
  import {
    addressUserStore
  } from "../../store/address.js"
  const  addressStore= addressUserStore()
  //定义商品id
  const goods_id = ref(0)
  //定义弹出层
  const show = ref(false)
  //定义规格是否选中
  const unique = ref(false)
  //商品数量
  const  goodcount = ref(1)
  onLoad((options) => {
    goods_id.value = options.goods_id
  });
  //数量加一
function addcount(){
            goodcount.value +=1
  }
  //数量减一
function cutcount(){
  if(goodcount.value==0){
    uni.showToast({
      title: '数量不能为负',
      duration: 2000,
      icon: "error"
    });    
  }else{
     goodcount.value -=1
  }
  }
  //判断数量是否是数值
  function isnumber(){
      if (isNaN(goodcount.value)){
         goodcount.value = 0
         uni.showToast({
           title: '请输入数字',
           duration: 2000,
           icon: "error"
         });  
      }else if(goodcount.value<0 ){
        uni.showToast({
          title: '数量不能为负',
          duration: 2000,
          icon: "error"
        });   
           goodcount.value = 0
      }
  }
  //商品
  const goodStore = goodsStore()
  //购物车
  const cartstore = cartStore()
  //添加购物车
  function showkua() {
      show.value = true
  }
  //加入购物车
  function addcart(){
       const data = {
         "goods_id":goods_id.value,
         "goodcount":goodcount.value
       }
       cartstore.addcart(data)
        show.value = false
  }
 function probuy(){
    //获取默认地址
      addressStore.getdeladdre()
   uni.navigateTo({
     url:`/subPack/submitorder/submitorder?goods_id=${goods_id.value}&goodcount=${goodcount.value}`
   })
   
 }
  const {
    goods_Detail
  } = goodStore
</script>

<style scoped lang="scss">
  .pricese {
    // border: 1px solid red;
    padding: 0 20rpx;
    align-items: center;
    display: flex;
    background-color: #fff;

    .price {
      color: #ff0000;
      // border: 1px solid red;
      font-size: 50rpx;
      margin: 10px 0;
      // border: 1px solid red;
    }

    .delprice {
      // border: 1px solid red;
      // border: 1px solid red;
      margin-top: 10rpx;
      margin-left: 10rpx;
      font-size: 30rpx;
      text-decoration: line-through;
      color: #999999;
    }
  }

  .right {

    // border: 1px solid red;
    display: flex;
    margin-left: 20rpx;
    font-size: 28rpx;
    align-items: center;


    .btn {
      text-align: center;
      line-height: 80rpx;
      width: 250rpx;

      color: #ffffff;
    }

    .cart {
      background-color: #ed3f14;
      border-radius: 40rpx 0 0 40rpx;
    }

    .buy {
      background-color: #ff7900;
      border-radius: 0 40rpx 40rpx 0;
    }
  }

// 弹出层
  .eject {
   height: 600rpx;
   // border: 1px solid red;
   // 上
   .eject-s {
    height: 200rpx;
    display: flex;

    // 图片
    .eject-img {
     width: 200rpx;
     height: 198rpx;
     // border: 1px solid red;
     margin-left: 20rpx;
     margin-top: 20rpx;
     image {
      width: 100%;
      height: 99%;
     }
    }

    // 价钱和库存
    .prices {
     width: 300rpx;
     height: 198rpx;
     margin-left: 10rpx;
     // border: 1px solid red;

     .prices-name {
      display: block;
      font-size: 15px;
      font-weight: 600;
      padding-top: 50rpx;
      color:#ed3f14;
     }

     .prices-span {
      display: block;
      color: #999999;
      font-size: 12px;
      padding-top: 20rpx;
     }

    }
   }

   // 中
   .eject-z {
    width: 100%;
    height: 170rpx;
    // border: 1px solid red;
    // border-bottom: 1px solid #e2e2e2;

    // 规格
    .default {
     width: 110rpx;
     height: 70rpx;
     line-height: 70rpx;
     border: 1px solid #eaeaea;
     border-radius: 5px;
     margin-left: 20rpx;
     margin-top: 20rpx;
     text-align: center;
     background-color: #eaeaea;
    }
    .defaulter {
     border: 1px solid #eaeaea;
     }
    .defaultt {
     border: 1px solid #ed3f14;
     color: #ed3f14;
    }

    .cject-name {
     display: block;
     padding-top: 20rpx;
     margin-left: 20rpx;
     color: #666666;
    }
   }

   // 下
   .eject-x {
    width: 100%;
    height: 220rpx;
    // border: 1px solid red;

    // 数量
    .quantity {
     width: 100%;
     height: 90rpx;
     line-height: 90rpx;
     // border: 1px solid red;
     display: flex;
     justify-content: space-between;
     align-items: center;

    .quantity-name {
          font-weight: 600;
          margin-left: 20rpx;
         }
    
         // 加减
         .quantity-box {
          width: 220rpx;
          height: 70rpx;
          // border: 1px solid red;
          display: flex;
          justify-content: space-between;
          align-items: center;
    
          .reduce {
           width: 55rpx;
           height: 50rpx;
           line-height: 50rpx;
           // border: 1px solid red;
           background-color: #f4f4f4;
           text-align: center;
           color: #999999;
          }
    
          .amount {
           width: 100rpx;
 
           // border: 1px solid red;
           background-color: #f4f4f4;
           text-align: center;
    
        
          }
    
          .addd {
           width: 55rpx;
           height: 50rpx;
           line-height: 50rpx;
           // border: 1px solid red;
           background-color: #f4f4f4;
           text-align: center;
           color: #999999;
          }
         }
    
    
        }
    
        //  加入  够买 
        .category {
         width: 95%;
         height: 100rpx;
         margin: 0 auto;
         // border: 1px solid red;
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 25rpx;
    
         // 加入
         .join {
          width: 48%;
          height: 80rpx;
          line-height: 80rpx;
          // border: 1px solid red;
          border-radius: 50px;
          background-color: #ed3f14;
          text-align: center;
          color: #f4f4f4;
         }
    
         // 够买
         .buy {
          width: 48%;
          height: 80rpx;
          line-height: 80rpx;
          // border: 1px solid red;
          border-radius: 50px;
          background-color: #ff7900;
          text-align: center;
      color: #f4f4f4;
          
         }
        }
       }
       }
</style>